<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" th:href="@{/element-ui/lib/theme-chalk/index.css}">
    <style>
        body {
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 450px;
            margin: auto;
        }

        h1 {
            text-align: center;
            color: #333;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .hospital-element {
            margin-top: 25%;
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .hospital-element2 {
            background-color: rgba(181, 229, 181, 0.53);
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .element-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .element-description {
            color: #666;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">

            <div class="hospital-element">
                <h1>医院管理系统</h1>



                <div class="element-title hospital-element2" style="text-align: center"  @click="gotoLu">入院信息录入</div>
                <div class="element-title hospital-element2" style="text-align: center"  @click="gotoChu">出院信息录入</div>
                <div class="element-title hospital-element2" style="text-align: center"  @click="gotodel">删除病人信息</div>
                <div class="element-title hospital-element2" style="text-align: center"  @click="gotoInfo">所有录入信息</div>
                <div class="element-title hospital-element2" style="text-align: center"  @click="gotoInsert">添加医院信息</div>
<!--                <div class="element-description">这里可以进行方便快捷的录入入院信息，提供便利的服务。</div>-->
<!--            </div>-->

<!--            <div class="hospital-element" @click="gotoChu">-->
<!--                <div class="element-title">出院信息录入</div>-->
<!--                <div class="element-description">这里进行医院出院信息录入。</div>-->
<!--            </div>-->
<!--            <div class="hospital-element" @click="gotodel">-->
<!--                <div class="element-title">删除病人信息</div>-->
<!--                <div class="element-description">这里展示进行病人信息删除</div>-->
<!--            </div>-->
<!--            <div class="hospital-element" @click="gotoInfo">-->
<!--                <div class="element-title">所有录入信息</div>-->
<!--                <div class="element-description">这里展示将展示所有的录入信息</div>-->
            </div>


        </div>

        <!-- 引入 Vue.js 和 Element UI 脚本 -->
        <!-- 注意：此示例中未使用 Vue.js -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
            activeIndex: '1',
            activeIndex2: '1',
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            gotoLu(){
                window.location.href = 'index1.html';
            },
            gotoChu(){
                window.location.href = './index2.html';
            },
            gotoInfo(){
                window.location.href = './index3.html';
            },
            gotodel(){
                window.location.href = './index4.html';
            },
            gotoInsert(){
                window.location.href = './index5.html';
            }
        }
    })
</script>

</html>